import React from 'react';
import { ResponsiveGrid, Form, Input, Checkbox ,Message} from '@alifd/next';
import styles from './index.module.scss';
import { logger,useHistory } from 'ice';
import {newCategory} from './service';

const { Cell } = ResponsiveGrid;
const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {
    fixedSpan: 6,
  },
  wrapperCol: {
    span: 18,
  },
};

const NewCategory = () => {
  const history = useHistory();
  return (
    <ResponsiveGrid gap={20}>
      <Cell colSpan={12}>
        <div className={styles.container}>
          <div className={styles.title}>新建分类</div>
          <Form style={{ width: '60%', marginLeft: 30 }} {...formItemLayout} colon>
            <FormItem label="类别名称" required requiredMessage="请输入类别名称" size="large" labelTextAlign="left">
              <Input name="categoryName" />
            </FormItem>
            <FormItem label=" " colon={false} size="medium">
              <Form.Submit
                type="primary"
                validate
                onClick={(values) => {
                  logger.log(values);
                  newCategory(values.categoryName).then(res=>{
                    Message.success({
                      content:'新建类别成功'
                    })
                  }).then(()=>{
                    history.push('/basic/CategoryList')
                  });
                }}
                style={{ marginRight: 8 }}
              >
                新建
              </Form.Submit>
            </FormItem>
          </Form>
        </div>
      </Cell>
    </ResponsiveGrid>
  );
};

export default NewCategory;
